<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <nav
    class="main-project-nav"
    data-test="main-project-nav">
    <div class="main-project-nav-inner">
      <div
        (pointerenter)="popup($event, 'project')"
        (pointerleave)="out()"
        [attr.data-text]="'project'"
        class="workspace">
        <a
          class="project-logo"
          (focus)="popup($event, 'project')"
          (focusout)="out()"
          [attr.data-text]="'project'"
          [class.active-dialog]="dialog.type === 'project'"
          [routerLink]="['/project', project.id, project.slug, 'overview']">
          <tg-ui-avatar
            class="project-logo-image"
            type="light"
            [color]="project.color"
            [avatarUrl]="project.logoSmall"
            [name]="project.name">
          </tg-ui-avatar>

          <span class="visually-hidden">{{ t('navigation.go_home') }}</span>
        </a>
        <div
          *ngIf="!collapsed"
          class="workspace-data">
          <a
            class="workspace-data-project"
            data-test="project-name"
            [routerLink]="['/project', project.id, project.slug, 'overview']">
            {{ project.name }}
          </a>
          <a
            *ngIf="project.workspace.userRole === 'member'"
            class="workspace-data-workspace workspace-data-workspace-anchor"
            [routerLink]="[
              '/workspace',
              project.workspace.id,
              project.workspace.slug,
              'projects'
            ]">
            {{ project.workspace.name }}
          </a>
          <span
            *ngIf="
              project.workspace.userRole === 'guest' ||
              project.workspace.userRole === 'none'
            "
            class="workspace-data-workspace">
            {{ project.workspace.name }}
          </span>
        </div>
      </div>
      <div class="menu-wrapper">
        <nav class="primary-menu">
          <ul @blockInitialRenderAnimation>
            <li
              class="menu-option"
              [class.active]="overviewActive.isActive"
              [attr.data-text]="t('commons.overview')"
              (pointerenter)="popup($event, 'overview')"
              (pointerleave)="out()">
              <a
                (focus)="popup($event, 'overview')"
                (focusout)="out()"
                data-test="navigate-overview"
                [attr.data-text]="t('commons.overview')"
                [attr.aria-label]="collapsed ? t('commons.overview') : null"
                class="menu-option-item"
                [class.active-dialog]="dialog.type === 'overview'"
                [routerLink]="[
                  '/project',
                  project.id,
                  project.slug,
                  'overview'
                ]"
                routerLinkActive
                #overviewActive="routerLinkActive"
                [routerLinkActiveOptions]="{ exact: true }">
                <tui-svg
                  class="menu-option-icon"
                  src="overview"></tui-svg>
                <span
                  *ngIf="!collapsed"
                  class="menu-option-text"
                  data-animation="text">
                  {{ t('commons.overview') }}
                </span>
              </a>
            </li>
            <ng-container *ngIf="project.workflows.length <= 1 && !collapsed">
              <li
                class="menu-option kanban-option has-add-workflow-button"
                *hasPermission="
                  ['view', 'modify', 'comment', 'delete'];
                  entity: 'story';
                  operation: 'OR'
                "
                routerLinkActive="active"
                data-test="kanban-button">
                <a
                  @slideIn
                  (focus)="popup($event, 'kanban')"
                  (focusout)="out()"
                  [attr.data-text]="t('commons.kanban')"
                  [attr.aria-label]="collapsed ? t('commons.kanban') : null"
                  class="menu-option-item"
                  [class.active-dialog]="dialog.type === 'kanban'"
                  [class.active-section]="activeSection"
                  [routerLink]="[
                    '/project',
                    project.id,
                    project.slug,
                    'kanban',
                    project.workflows[0].slug
                  ]">
                  <tui-svg
                    class="menu-option-icon"
                    src="kanban"></tui-svg>
                  <span
                    class="menu-option-text"
                    data-animation="text">
                    {{ t('commons.kanban') }}
                  </span>
                </a>
                <ng-container
                  *ngTemplateOutlet="createWorkflowButtonTpl"></ng-container>
              </li>
            </ng-container>
            <ng-container *ngIf="project.workflows.length > 1 && !collapsed">
              <div
                @slideIn
                *hasPermission="
                  ['view', 'modify', 'comment', 'delete'];
                  entity: 'story';
                  operation: 'OR'
                ">
                <div class="menu-option">
                  <div class="menu-option-item has-add-workflow-button">
                    <ng-container
                      *ngTemplateOutlet="
                        createWorkflowButtonTpl
                      "></ng-container>
                    <tui-svg
                      class="menu-option-icon"
                      src="kanban"></tui-svg>
                    <span
                      class="menu-option-text"
                      data-animation="text">
                      {{ t('commons.kanban') }}
                    </span>
                  </div>
                </div>
                <ol
                  [attr.aria-label]="t('common_project.workflow.workflow_list')"
                  data-test="workflow-list"
                  class="submenu"
                  *ngIf="!collapsed">
                  <li
                    *ngFor="
                      let workflow of project.workflows;
                      trackBy: trackById
                    "
                    class="submenu-option">
                    <a
                      class="submenu-option-item"
                      [class.submenu-option-item-active]="
                        currentWorkflow() === workflow.slug &&
                        (isKanbanUrl || storyIsOpen())
                      "
                      [routerLink]="[
                        '/project',
                        project.id,
                        project.slug,
                        'kanban',
                        workflow.slug
                      ]">
                      {{ workflow.name }}
                    </a>
                  </li>
                </ol>
              </div>
            </ng-container>
            <ng-container *ngIf="project.workflows.length <= 1 && collapsed">
              <li
                class="menu-option"
                routerLinkActive="active"
                [attr.data-text]="t('commons.kanban')"
                (pointerenter)="popup($event, 'kanban')"
                (pointerleave)="out()">
                <a
                  (focus)="popup($event, 'kanban')"
                  (focusout)="out()"
                  data-test="navigate-kanban"
                  [attr.data-text]="t('commons.kanban')"
                  [attr.aria-label]="collapsed ? t('commons.kanban') : null"
                  class="menu-option-item"
                  [class.active-dialog]="dialog.type === 'kanban'"
                  [routerLink]="[
                    '/project',
                    project.id,
                    project.slug,
                    'kanban',
                    project.workflows[0].slug
                  ]"
                  routerLinkActive>
                  <tui-svg
                    class="menu-option-icon"
                    src="kanban"></tui-svg>
                  <span
                    *ngIf="!collapsed"
                    class="menu-option-text"
                    data-animation="text">
                    {{ t('commons.kanban') }}
                  </span>
                </a>
              </li>
            </ng-container>
            <ng-container *ngIf="project.workflows.length > 1 && collapsed">
              <li class="menu-option menu-option-kanban">
                <tui-hosted-dropdown
                  kanbanWorkflowMenuPosition
                  kanbanWorkflowMenuStyles
                  [content]="workflowsDropdown"
                  [(open)]="openworkflowsDropdown">
                  <button
                    class="menu-option-item collapsed-kanban-button"
                    aria-controls="dialog-kanban"
                    aria-haspopup="true"
                    [attr.aria-expanded]="openworkflowsDropdown"
                    [attr.aria-label]="t('commons.kanban')"
                    type="button"
                    data-test="projects-dropdown">
                    <tui-svg
                      class="menu-option-icon"
                      src="kanban"></tui-svg>
                  </button>
                </tui-hosted-dropdown>
                <ng-template #workflowsDropdown>
                  <!-- TODO: Remove `kanbanWorkflowMenuStyles` directive when `:has()` is supported by major browsers: https://caniuse.com/css-has -->
                  <div
                    class="dialog-kanban"
                    kanbanWorkflowMenuStyles
                    id="dialog-kanban">
                    <div class="dialog-kanban-title has-add-workflow-button">
                      <span class="dialog-kanban-text">
                        {{ t('commons.kanban') }}
                      </span>
                      <ng-container
                        *ngTemplateOutlet="
                          createWorkflowButtonTpl
                        "></ng-container>
                    </div>
                    <ol
                      class="submenu"
                      [attr.aria-label]="t('commons_project.workflow_list')">
                      <li
                        class="submenu-option"
                        *ngFor="
                          let workflow of project.workflows;
                          trackBy: trackById
                        ">
                        <a
                          class="submenu-option-item"
                          routerLinkActive="submenu-option-item-active"
                          [routerLink]="[
                            '/project',
                            project.id,
                            project.slug,
                            'kanban',
                            workflow.slug
                          ]">
                          {{ workflow.name }}
                        </a>
                      </li>
                    </ol>
                  </div>
                </ng-template>
              </li>
            </ng-container>
          </ul>
        </nav>
        <div class="bottom-menu">
          <div
            class="bottom-menu-option"
            [attr.data-text]="t('main_project_navigation.project_settings')"
            (pointerenter)="popup($event, 'project-settings')"
            (pointerleave)="out()">
            <button
              type="button"
              *ngIf="project.userIsAdmin"
              #projectSettingButton
              data-test="settings-button"
              (click)="openSettings()"
              (focus)="popup($event, 'project-settings')"
              (focusout)="out()"
              [attr.data-text]="t('main_project_navigation.project_settings')"
              [attr.aria-label]="
                collapsed ? t('main_project_navigation.project_settings') : null
              "
              class="project-settings menu-option-item"
              [class.active-dialog]="dialog.type === 'project-settings'">
              <tui-svg
                class="menu-option-icon"
                src="settings"></tui-svg>
              <span
                *ngIf="!collapsed"
                class="bottom-menu-option-text"
                data-animation="text">
                {{ t('main_project_navigation.project_settings') }}
              </span>
            </button>
          </div>
          <button
            type="button"
            [class.collapsed]="collapseText"
            (click)="toggleCollapse()"
            class="button-collapse"
            [attr.aria-label]="
              collapsed
                ? t('main_project_navigation.expand_menu')
                : t('main_project_navigation.collapse_menu')
            ">
            <span
              *ngIf="!collapsed"
              class="button-collapse-text"
              data-animation="text">
              {{ t('main_project_navigation.collapse_menu') }}
            </span>
            <tui-svg
              class="collapse-icon"
              [src]="getCollapseIcon()"></tui-svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div
    class="project-menu-dialog"
    (pointerenter)="enterDialog()"
    (focus)="enterDialog()"
    (keyup.ESC)="outDialog('backlog')"
    (pointerleave)="outDialog()"
    [class.open]="dialog.open"
    [style.top.px]="dialog.top"
    [style.left.px]="dialog.left">
    <a
      *ngIf="dialog.type !== 'project' && dialog.type !== 'project-settings'"
      [attr.href]="dialog.link"
      [style.height.px]="dialog.mainLinkHeight"
      [class.has-add-workflow-button]="dialog.type === 'kanban'"
      class="main-link">
      <span class="dialog-text">
        {{ dialog.text }}
      </span>
    </a>
    <ng-container *ngIf="dialog.type === 'kanban'">
      <ng-container *ngTemplateOutlet="createWorkflowButtonTpl"></ng-container>
    </ng-container>
    <button
      *ngIf="dialog.type === 'project-settings'"
      (click)="openSettings()"
      type="button"
      class="popover-open-settings-action"
      [attr.aria-label]="dialog.text"
      [style.height.px]="dialog.mainLinkHeight">
      {{ dialog.text }}
    </button>

    <div
      *ngIf="dialog.type === 'project'"
      class="dialog-project"
      [style.height.px]="dialog.mainLinkHeight">
      <a
        class="workspace-data-project"
        [routerLink]="['/project', project.id, project.slug, 'overview']">
        {{ project.name }}
      </a>
      <a
        class="workspace-data-workspace"
        [routerLink]="[
          '/workspace',
          project.workspace.id,
          project.workspace.slug
        ]">
        {{ project.workspace.name }}
      </a>
    </div>
  </div>
  <ng-template #createWorkflowButtonTpl>
    <a
      [routerLink]="['/project', project.id, project.slug, 'new-workflow']"
      *ngIf="project.userIsAdmin"
      class="create-workflow"
      data-test="create-workflow"
      size="m"
      appearance="action-button-2"
      variant="dark"
      [tgUiTooltip]="t('common_project.workflow.create')"
      tgUiTooltipPosition="bottom-right"
      [attr.aria-label]="t('common_project.workflow.create')"
      (pointerenter)="activeSection = true"
      (pointerleave)="activeSection = false"
      tuiIconButton
      icon="plus"></a>
  </ng-template>
</ng-container>
